<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.1.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/blog/css/main.css">


<link rel="stylesheet" href="/blog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"coderiding.gitee.io","root":"/blog/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="怎么选择跨端方案，可以从变成语言的角度，可以从页面框架的角度，可以从性能的角度，比如说主流的跨端方案，一种是，将JavaScriptCore引擎当做虚拟机的方案，代表框架React Native；另一种是使用非JavaScriptCore虚拟机的方案，代表框架是Flutter...">
<meta property="og:type" content="article">
<meta property="og:title" content="移动APP混合框架">
<meta property="og:url" content="https://coderiding.gitee.io/blog/2020/09/14/%E7%A7%BB%E5%8A%A8APP%E6%B7%B7%E5%90%88%E6%A1%86%E6%9E%B6/index.html">
<meta property="og:site_name" content="汶的博客">
<meta property="og:description" content="怎么选择跨端方案，可以从变成语言的角度，可以从页面框架的角度，可以从性能的角度，比如说主流的跨端方案，一种是，将JavaScriptCore引擎当做虚拟机的方案，代表框架React Native；另一种是使用非JavaScriptCore虚拟机的方案，代表框架是Flutter...">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-09-13T23:09:01.000Z">
<meta property="article:modified_time" content="2020-09-15T01:12:29.719Z">
<meta property="article:author" content="汶">
<meta property="article:tag" content="混合开发">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://coderiding.gitee.io/blog/2020/09/14/%E7%A7%BB%E5%8A%A8APP%E6%B7%B7%E5%90%88%E6%A1%86%E6%9E%B6/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>移动APP混合框架 | 汶的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/blog/atom.xml" title="汶的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/blog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">汶的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://coderiding.gitee.io/blog/2020/09/14/%E7%A7%BB%E5%8A%A8APP%E6%B7%B7%E5%90%88%E6%A1%86%E6%9E%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/side_image.png">
      <meta itemprop="name" content="汶">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="汶的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          移动APP混合框架
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-09-14 07:09:01" itemprop="dateCreated datePublished" datetime="2020-09-14T07:09:01+08:00">2020-09-14</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-09-15 09:12:29" itemprop="dateModified" datetime="2020-09-15T09:12:29+08:00">2020-09-15</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/%E6%94%B9%E5%8F%98%E4%B8%96%E7%95%8C/" itemprop="url" rel="index"><span itemprop="name">改变世界</span></a>
                </span>
            </span>

          
            <div class="post-description">怎么选择跨端方案，可以从变成语言的角度，可以从页面框架的角度，可以从性能的角度，比如说主流的跨端方案，一种是，将JavaScriptCore引擎当做虚拟机的方案，代表框架React Native；另一种是使用非JavaScriptCore虚拟机的方案，代表框架是Flutter...</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="移动APP混合框架"><a href="#移动APP混合框架" class="headerlink" title="移动APP混合框架"></a>移动APP混合框架</h1><blockquote>
<p>主流的跨端方案，一种是，将JavaScriptCore引擎当做虚拟机的方案，代表框架React Native；另一种是使用非JavaScriptCore虚拟机的方案，代表框架是Flutter。</p>
</blockquote>
<h2 id="怎么选择跨端方案"><a href="#怎么选择跨端方案" class="headerlink" title="怎么选择跨端方案"></a>怎么选择跨端方案</h2><h3 id="从编程语言角度"><a href="#从编程语言角度" class="headerlink" title="从编程语言角度"></a>从编程语言角度</h3><ul>
<li>JavaScript的历史和流行程度都远超Dart,生态也更加完善,开发者也远多于Dart程序  员。所以,从编程语言的角度来看,虽然Dart语言入门简单,但从长远考虑,还是选择  React Native会更好一些。   </li>
</ul>
<h3 id="从页面框架角度"><a href="#从页面框架角度" class="headerlink" title="从页面框架角度"></a>从页面框架角度</h3><ul>
<li>同时,从页面框架和自动化工具的角度来看, React Native也要领先于 Flutter。这,主要  得益于web技术这么多年的积累,其工具链非常完善。前端开发者能够很轻松地掌握  React Native,并进行移动端App的开发</li>
</ul>
<h3 id="从性能等角度"><a href="#从性能等角度" class="headerlink" title="从性能等角度"></a>从性能等角度</h3><ul>
<li>相比于 React Native框架, Flutter的优势最主要体现在性能、开发效率和体验  这两大方面。</li>
<li>Flutter却不一样。它一开始就抛弃了历史包袱,使用全新的Dart语言编写,同时支持AOT  和JT两种编译方式,而没有采用HTML/csS/ JavaScript组合方式开发,在执行效率上  明显高于 JavaScriptCore。</li>
<li>除了编程语言的虚拟机，Flutter的优势还体现在Ul框架的实现上。它重写了Ul框架，从Ul 控件到渲染，全部重新实现了，依赖Skia图形库和系统图形绘制相关的接口，保证了不同平台上能有相同的体验。</li>
</ul>
<h3 id="选择"><a href="#选择" class="headerlink" title="选择"></a>选择</h3><ul>
<li>一旦使用Flutter开发成为团队的必选项，那么其他技术栈就没有存在的价值了。</li>
<li>我将跨平台方案分成了两种:一种是,将 JavaScriptcore引擎当作虚  拟机的方案,代表框架是 React Native;另一种是,使用非 JavaScriptcore虚拟机的方  案,代表框架是 Flutter。</li>
<li>在我看来，从长远考虑的话，你可以选择Flutter作为跨平台开发方案。但是，最终 Flutter是否能成功，还要看谷歌新系统Fuchsia的成败。</li>
</ul>
<h2 id="原生"><a href="#原生" class="headerlink" title="原生"></a>原生</h2><ul>
<li>原生应用程序是指某一个移动平台（比如iOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。</li>
</ul>
<h3 id="主要优势："><a href="#主要优势：" class="headerlink" title="主要优势："></a>主要优势：</h3><ul>
<li>可访问平台全部功能（GPS、摄像头）；</li>
<li>速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；</li>
</ul>
<h3 id="主要缺点："><a href="#主要缺点：" class="headerlink" title="主要缺点："></a>主要缺点：</h3><ul>
<li><p>平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；</p>
</li>
<li><p>内容固定，动态化弱，大多数情况下，有新功能更新时只能发版；</p>
</li>
<li><p>在移动互联网发展初期，业务场景并不复杂，原生开发还可以应对产品需求迭代。 但近几年，随着物联网时代到来、移动互联网高歌猛进，日新月异，在很多业务场景中，传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在：</p>
</li>
<li><p>动态化内容需求增大；当需求发生变化时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核是需要周期的，这对高速变化的互联网时代来说是很难接受的，所以，对应用动态化(不发版也可以更新应用内容)的需求就变的迫在眉睫。</p>
</li>
<li><p>业务需求变化快，开发成本变大；由于原生开发一般都要维护Android、iOS两个开发团队，版本迭代时，无论人力成本，还是测试成本都会变大。</p>
</li>
<li><p>总结一下，纯原生开发主要面临动态化和开发成本两个问题，而针对这两个问题，诞生了一些跨平台的动态化框架。</p>
</li>
</ul>
<h2 id="混合方案一：原生-H5"><a href="#混合方案一：原生-H5" class="headerlink" title="混合方案一：原生+H5"></a>混合方案一：原生+H5</h2><ol>
<li><a target="_blank" rel="noopener" href="https://cordova.apache.org/docs/zh-cn/8.x/guide/platforms/ios/index.html">Cordova</a></li>
<li><a target="_blank" rel="noopener" href="https://ionicframework.com/">Ionic</a></li>
<li>微信小程序</li>
</ol>
<ul>
<li>这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现，通过原生的网页加载控件WebView (Android)或WKWebView（iOS）来加载（以后若无特殊说明，我们用WebView来统一指代android和iOS中的网页加载控件）。这样一来，H5部分是可以随时改变而不用发版，动态化需求能满足；同时，由于h5代码只需要一次开发，就能同时在Android和iOS两个平台运行，这也可以减小开发成本，也就是说，H5部分功能越多，开发成本就越小。我们称这种h5+原生的开发模式为混合开发 ，采用混合模式开发的APP我们称之为混合应用或Hybrid APP ，如果一个应用的大多数功能都是H5实现的话，我们称其为Web APP 。</li>
<li>目前混合开发框架的典型代表有：Cordova、Ionic 和微信小程序，值得一提的是微信小程序目前是在webview中渲染的，并非原生渲染，但将来有可能会采用原生渲染。</li>
</ul>
<h3 id="主要优点："><a href="#主要优点：" class="headerlink" title="主要优点："></a>主要优点：</h3><ul>
<li>混合应用的优点是动态内容是H5，web技术栈，社区及资源丰富。</li>
</ul>
<h3 id="主要缺点：-1"><a href="#主要缺点：-1" class="headerlink" title="主要缺点："></a>主要缺点：</h3><ul>
<li>缺点是性能不好，对于复杂用户界面或动画，WebView不堪重任。</li>
</ul>
<hr>
<ul>
<li>这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现，通过原生的网页加载控件WebView (Android)或WKWebView（iOS）来加载（以后若无特殊说明，我们用WebView来统一指代android和iOS中的网页加载控件）。这样一来，H5部分是可以随时改变而不用发版，动态化需求能满足；同时，由于h5代码只需要一次开发，就能同时在Android和iOS两个平台运行，这也可以减小开发成本，也就是说，H5部分功能越多，开发成本就越小。我们称这种h5+原生的开发模式为混合开发 ，采用混合模式开发的APP我们称之为混合应用或Hybrid APP ，如果一个应用的大多数功能都是H5实现的话，我们称其为Web APP 。</li>
<li>目前混合开发框架的典型代表有：Cordova、Ionic 和微信小程序，值得一提的是微信小程序目前是在webview中渲染的，并非原生渲染，但将来有可能会采用原生渲染。</li>
</ul>
<hr>
<h2 id="混合方案二：原生-JavaScript"><a href="#混合方案二：原生-JavaScript" class="headerlink" title="混合方案二：原生+JavaScript"></a>混合方案二：原生+JavaScript</h2><ol>
<li><a target="_blank" rel="noopener" href="https://facebook.github.io/react-native/">React Native</a> facebook出品</li>
<li><a target="_blank" rel="noopener" href="https://weex.apache.org/">Weex</a> 阿里巴巴出品</li>
<li><a target="_blank" rel="noopener" href="https://www.quickapp.cn/">快应用</a></li>
</ol>
<h3 id="主要优点：-1"><a href="#主要优点：-1" class="headerlink" title="主要优点："></a>主要优点：</h3><ul>
<li>采用Web开发技术栈，社区庞大、上手快、开发成本相对较低。</li>
<li>原生渲染，性能相比H5提高很多。</li>
<li>动态化较好，支持热更新。</li>
</ul>
<h3 id="主要不足："><a href="#主要不足：" class="headerlink" title="主要不足："></a>主要不足：</h3><ul>
<li>渲染时需要JavaScript和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿。</li>
<li>JavaScript为脚本语言，执行时需要JIT(Just In Time)，执行效率和AOT(Ahead Of Time)代码仍有差距。</li>
<li>由于渲染依赖原生控件，不同平台的控件需要单独维护，并且当系统更新时，社区控件可能会滞后；除此之外，其控件系统也会受到原生UI系统限制，例如，在Android中，手势冲突消歧规则是固定的，这在使用不同人写的控件嵌套时，手势冲突问题将会变得非常棘手。</li>
</ul>
<hr>
<h3 id="React-Native"><a href="#React-Native" class="headerlink" title="React Native"></a>React Native</h3><ul>
<li>React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和Android两个平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。</li>
<li>由于RN和React原理相通，并且Flutter也是受React启发，很多思想也都是相通的，万丈高楼平地起，我们有必要深入了解一下React原理。React是一个响应式的Web框架，我们先了解一下两个重要的概念：DOM树与响应式编程。</li>
<li>上文已经提到React Native 是React 在原生移动应用平台的衍生产物，那两者主要的区别是什么呢？其实，主要的区别在于虚拟DOM映射的对象是什么？React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。</li>
<li>JavaScriptCore 是一个JavaScript解释器，它在React Native中主要有两个作用：</li>
<li>为JavaScript提供运行环境。</li>
<li>是JavaScript与原生应用之间通信的桥梁，作用和JsBridge一样，事实上，在iOS中，很多JsBridge的实现都是基于 JavaScriptCore 。</li>
<li>而RN中将虚拟DOM映射为原生控件的过程中分两步：</li>
<li>布局消息传递； 将虚拟DOM布局信息传递给原生；</li>
<li>原生根据布局信息通过对应的原生控件渲染控件树；</li>
<li>至此，React Native 便实现了跨平台。 相对于混合应用，由于React Native是原生控件渲染，所以性能会比混合应用中H5好很多，同时React Native是Web开发技术栈，也只需维护一份代码，同样是跨平台框架。</li>
</ul>
<hr>
<h3 id="Weex"><a href="#Weex" class="headerlink" title="Weex"></a>Weex</h3><ul>
<li>Weex是阿里巴巴于2016年发布的跨平台移动端开发框架，思想及原理和React Native类似，最大的不同是语法层面，Weex支持Vue语法和Rax语法，Rax 的 DSL(Domain Specific Language) 语法是基于 React JSX 语法而创造。与 React 不同，在 Rax 中 JSX 是必选的，它不支持通过其它方式创建组件，所以学习 JSX 是使用 Rax 的必要基础。而React Native只支持JSX语法。</li>
</ul>
<hr>
<h3 id="快应用"><a href="#快应用" class="headerlink" title="快应用"></a>快应用</h3><ul>
<li>快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准，目标直指微信小程序。它也是采用JavaScript语言开发，原生控件渲染，与React Native和Weex相比主要有两点不同：</li>
<li>快应用自身不支持Vue或React语法，其采用原生JavaScript开发，其开发框架和微信小程序很像，值得一提的是小程序目前已经可以使用Vue语法开发（mpvue），从原理上来讲，Vue的语法也可以移植到快应用上。</li>
<li>React Native和Weex的渲染/排版引擎是集成到框架中的，每一个APP都需要打包一份，安装包体积较大；而快应用渲染/排版引擎是集成到ROM中的，应用中无需打包，安装包体积小，正因如此，快应用才能在保证性能的同时做到快速分发。</li>
</ul>
<hr>
<h2 id="混合方案三：原生-自绘"><a href="#混合方案三：原生-自绘" class="headerlink" title="混合方案三：原生+自绘"></a>混合方案三：原生+自绘</h2><ol>
<li><a target="_blank" rel="noopener" href="https://www.qt.io/mobile-app-development/">QT for mobile</a></li>
<li><a target="_blank" rel="noopener" href="https://flutter.io/">Flutter</a> 谷歌出品</li>
</ol>
<ul>
<li>在本篇中，我们看看最后一种跨平台技术：自绘UI+原生。这种技术的思路是，通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性。注意，自绘引擎解决的是UI的跨平台问题，如果涉及其它系统能力调用，依然要涉及原生开发。</li>
</ul>
<h3 id="主要优点：-2"><a href="#主要优点：-2" class="headerlink" title="主要优点："></a>主要优点：</h3><ul>
<li>性能高；由于自绘引擎是直接调用系统API来绘制UI，所以性能和原生控件接近。</li>
<li>灵活、组件库易维护、UI外观保真度和一致性高；由于UI渲染不依赖原生控件，也就不需要根据不同平台的控件单独维护一套组件库，所以代码容易维护。由于组件库是同一套代码、同一个渲染引擎，所以在不同平台，组件显示外观可以做到高保真和高一致性；另外，由于不依赖原生控件，也就不会受原生布局系统的限制，这样布局系统会非常灵活。</li>
</ul>
<h3 id="主要不足：-1"><a href="#主要不足：-1" class="headerlink" title="主要不足："></a>主要不足：</h3><ul>
<li>动态性不足；为了保证UI绘制性能，自绘UI系统一般都会采用AOT模式编译其发布包，所以应用发布后，不能像Hybrid和RN那些使用JavaScript（JIT）作为开发语言的框架那样动态下发代码。</li>
<li>也许你已经猜到Flutter就属于这一类跨平台技术，没错，Flutter正是实现一套自绘引擎，并拥有一套自己的UI布局系统。不过，自绘制引擎的思路并不是什么新概念，Flutter并不是第一个尝试这么做的，在它之前有一个典型的代表，即大名鼎鼎的QT。</li>
</ul>
<hr>
<h3 id="Flutter"><a href="#Flutter" class="headerlink" title="Flutter"></a>Flutter</h3><ul>
<li>“千呼万唤始出来”，铺垫这么久，现在终于等到本书的主角出场了！</li>
<li>Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。Flutter和QT mobile一样，都没有使用原生控件，相反都实现了一个自绘引擎，使用自身的布局、绘制系统。那么，我们会担心，QT mobile面对的问题Flutter是否也一样，Flutter会不会步入QT mobile后尘，成为另一个烈士？要回到这个问题，我们先来看看Flutter诞生过程：</li>
<li>2017 年 Google I/O 大会上，Google 首次推出了一款新的用于创建跨平台、高性能的移动应用框架——Flutter。</li>
<li>2018年2月，Flutter发布了第一个Beta版本，同年五月， 在2018年Google I/O 大会上，Flutter 更新到了 beta 3 版本。</li>
<li>2018年6月，Flutter发布了首个预览版本，这意味着 Flutter 进入了正式版（1.0）发布前的最后阶段。</li>
<li>观其发展，在2018年5月份，Flutter 进入了 GitHub stars 排行榜前 100 名，已有 27k star。而今天(2019年5月29日)，已经有65K的Star。经历了短短2年多的时间，Flutter 生态系统得以快速增长，由此可见，Flutter在开发者中受到了热烈的欢迎，其未来发展值得期待！</li>
<li>现在，我们来和QT mobile做一个对比：</li>
<li>生态；从Github上来看，目前Flutter活跃用户正在高速增长。从Stackoverflow上提问来看，Flutter社区现在已经很庞大。Flutter的文档、资源也越来越丰富，开发过程中遇到的很多问题都可以在Stackoverflow或其github issue中找到答案。</li>
<li>技术支持；现在Google正在大力推广Flutter，Flutter的作者中很多人都是来自Chromium团队，并且github上活跃度很高。另一个角度，从今年上半年Flutter频繁的版本发布也可以看出Google对Flutter的投入的资源不小，所以在官方技术支持这方面，大可不必担心。</li>
<li>开发效率；Flutter的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以实现毫秒级热重载，并且不会丢失状态。这真的很棒，相信我，如果你是一名原生开发者，体验了Flutter开发流后，很可能就不想重新回去做原生了，毕竟很少有人不吐槽原生开发的编译速度。</li>
<li>基于以上三点，相信读者和笔者一样，Flutter未来如何，心中自有定论。到现在为止，我们已经对移动端开发技术有了一个全面的了解，接下来我们便要进入本书的主题，你准备好了吗！</li>
</ul>
<hr>
<h3 id="Qt"><a href="#Qt" class="headerlink" title="Qt"></a>Qt</h3><ul>
<li>Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。2008年，Qt Company科技被诺基亚公司收购，Qt也因此成为诺基亚旗下的编程语言工具。2012年，Qt被Digia收购。2014年4月，跨平台集成开发环境Qt Creator 3.1.0正式发布，实现了对于iOS的完全支持，新增WinRT、Beautifier等插件，废弃了无Python接口的GDB调试支持，集成了基于Clang的C/C++代码模块，并对Android支持做出了调整，至此实现了全面支持iOS、Android、WP，它提供给应用程序开发者构建图形用户界面所需的所有功能。但是，QT虽然在PC端获得了巨大成功，备受社区追捧，然而其在移动端却表现不佳，在近几年，虽然偶尔能听到QT的声音，但一直很弱，无论QT本身技术如何、设计思想如何，但事实上终究是败了，究其原因，笔者认为主要有四：</li>
<li>第一：QT移动开发社区太小，学习资料不足，生态不好。</li>
<li>第二：官方推广不利，支持不够。</li>
<li>第三：移动端发力较晚，市场已被其它动态化框架占领（Hybrid和RN)。</li>
<li>第四：在移动开发中，C++开发和Web开发栈相比有着先天的劣势，直接结果就是QT开发效率太低。</li>
<li>基于此四点，尽管QT是移动端开发跨平台自绘引擎的先驱，但却成为了烈士。</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://book.flutterchina.club/chapter1/mobile_development_intro.html">参考链接</a></p>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/blog/tags/%E6%B7%B7%E5%90%88%E5%BC%80%E5%8F%91/" rel="tag"># 混合开发</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/blog/2020/09/12/%E5%AE%9E%E6%88%98-%E5%AE%89%E5%8D%93android%E5%88%B6%E4%BD%9C%E8%AF%81%E4%B9%A6%E7%AD%BE%E5%90%8D%E6%96%87%E4%BB%B6/" rel="prev" title="实战-安卓android制作证书签名文件">
      <i class="fa fa-chevron-left"></i> 实战-安卓android制作证书签名文件
    </a></div>
      <div class="post-nav-item">
    <a href="/blog/2020/09/15/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3iOS%E7%9A%84Runloop%EF%BC%9F/" rel="next" title="如何理解iOS的Runloop？">
      如何理解iOS的Runloop？ <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%A7%BB%E5%8A%A8APP%E6%B7%B7%E5%90%88%E6%A1%86%E6%9E%B6"><span class="nav-number">1.</span> <span class="nav-text">移动APP混合框架</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E9%80%89%E6%8B%A9%E8%B7%A8%E7%AB%AF%E6%96%B9%E6%A1%88"><span class="nav-number">1.1.</span> <span class="nav-text">怎么选择跨端方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%8E%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E8%A7%92%E5%BA%A6"><span class="nav-number">1.1.1.</span> <span class="nav-text">从编程语言角度</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%8E%E9%A1%B5%E9%9D%A2%E6%A1%86%E6%9E%B6%E8%A7%92%E5%BA%A6"><span class="nav-number">1.1.2.</span> <span class="nav-text">从页面框架角度</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%8E%E6%80%A7%E8%83%BD%E7%AD%89%E8%A7%92%E5%BA%A6"><span class="nav-number">1.1.3.</span> <span class="nav-text">从性能等角度</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%89%E6%8B%A9"><span class="nav-number">1.1.4.</span> <span class="nav-text">选择</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8E%9F%E7%94%9F"><span class="nav-number">1.2.</span> <span class="nav-text">原生</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E4%BC%98%E5%8A%BF%EF%BC%9A"><span class="nav-number">1.2.1.</span> <span class="nav-text">主要优势：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E7%BC%BA%E7%82%B9%EF%BC%9A"><span class="nav-number">1.2.2.</span> <span class="nav-text">主要缺点：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B7%E5%90%88%E6%96%B9%E6%A1%88%E4%B8%80%EF%BC%9A%E5%8E%9F%E7%94%9F-H5"><span class="nav-number">1.3.</span> <span class="nav-text">混合方案一：原生+H5</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E4%BC%98%E7%82%B9%EF%BC%9A"><span class="nav-number">1.3.1.</span> <span class="nav-text">主要优点：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E7%BC%BA%E7%82%B9%EF%BC%9A-1"><span class="nav-number">1.3.2.</span> <span class="nav-text">主要缺点：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B7%E5%90%88%E6%96%B9%E6%A1%88%E4%BA%8C%EF%BC%9A%E5%8E%9F%E7%94%9F-JavaScript"><span class="nav-number">1.4.</span> <span class="nav-text">混合方案二：原生+JavaScript</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E4%BC%98%E7%82%B9%EF%BC%9A-1"><span class="nav-number">1.4.1.</span> <span class="nav-text">主要优点：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E4%B8%8D%E8%B6%B3%EF%BC%9A"><span class="nav-number">1.4.2.</span> <span class="nav-text">主要不足：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Native"><span class="nav-number">1.4.3.</span> <span class="nav-text">React Native</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Weex"><span class="nav-number">1.4.4.</span> <span class="nav-text">Weex</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BF%AB%E5%BA%94%E7%94%A8"><span class="nav-number">1.4.5.</span> <span class="nav-text">快应用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B7%B7%E5%90%88%E6%96%B9%E6%A1%88%E4%B8%89%EF%BC%9A%E5%8E%9F%E7%94%9F-%E8%87%AA%E7%BB%98"><span class="nav-number">1.5.</span> <span class="nav-text">混合方案三：原生+自绘</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E4%BC%98%E7%82%B9%EF%BC%9A-2"><span class="nav-number">1.5.1.</span> <span class="nav-text">主要优点：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%A6%81%E4%B8%8D%E8%B6%B3%EF%BC%9A-1"><span class="nav-number">1.5.2.</span> <span class="nav-text">主要不足：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Flutter"><span class="nav-number">1.5.3.</span> <span class="nav-text">Flutter</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Qt"><span class="nav-number">1.5.4.</span> <span class="nav-text">Qt</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="汶"
      src="/blog/images/side_image.png">
  <p class="site-author-name" itemprop="name">汶</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blog/archives/">
        
          <span class="site-state-item-count">6</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
        <span class="site-state-item-count">1</span>
        <span class="site-state-item-name">分类</span>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/codeRiding" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;codeRiding" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://weibo.com/coderiding" title="Weibo → https:&#x2F;&#x2F;weibo.com&#x2F;coderiding" rel="noopener" target="_blank"><i class="fab fa-weibo fa-fw"></i>Weibo</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">汶</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/blog/lib/anime.min.js"></script>
  <script src="/blog/lib/velocity/velocity.min.js"></script>
  <script src="/blog/lib/velocity/velocity.ui.min.js"></script>

<script src="/blog/js/utils.js"></script>

<script src="/blog/js/motion.js"></script>


<script src="/blog/js/schemes/pisces.js"></script>


<script src="/blog/js/next-boot.js"></script>




  















  

  

</body>
</html>
